<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
import * as echarts from 'echarts';
import { request } from "@/utils/service"

defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})

interface TableData {
  xAxis: number[],
  yAxis: number[]
}

function getTableDataApi() {
  return request<TableData>({
    url: "statistic/getRidesOnRoute",
    method: "get",
  })
}

onMounted(() => {
  var chartDom = document.getElementById('my_main');
  var myChart = echarts.init(chartDom);

  getTableDataApi()
    .then((data) => {
      // myChart.setOption(option)
      myChart.setOption({
        title: {
          text: "各线路车型数量统计"
        },
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: data.data.xaxis,
          name: "线路"
        },
        yAxis: {
          type: 'value',
          name: "乘坐次数"
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 130],
            data: data.data.yaxis,
            type: 'bar'
          }
        ]
      });
    })
    .catch(() => {
      // tableData.value = undefined
    })
})

</script>

<template>
  <div class="app-container">
    <div id="my_main" style="height: 600px;width: 800px;" ></div>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
